<template>
  <view class="work-record">
    <view class="line"><text></text></view>
    <view class="content">
      <view class="content_title">{{
        isEdit ? "修改任务记录" : "添加任务记录"
      }}</view>
      <!-- 备注 -->
      <view class="notice">
        <view class="name">
          <view>备注</view>
          <text>*</text>
        </view>
        <view class="area">
          <textarea
            :value="obj.disposeDesc"
            placeholder="请输入备注内容"
            placeholder-class="textare"
            :maxlength="300"
            :auto-height="true"
            :always-embed="true"
            @input="descConfirm"
          />
          <view class="length">{{ obj.disposeDesc.length + "/300" }}</view>
        </view>
      </view>

      <view class="imgBox">
        <view class="name"
          >照片/视频
          <text>*</text>
        </view>
        <image-drag-sort
          :max="9"
          @changeList="changeImg"
          :list="obj.disposeImgUrl"
        >
        </image-drag-sort>
      </view>
    </view>

    <view class="save"
      ><button hover-class="none" @click="handleSave">提交</button></view
    >
  </view>
</template>

<script>
import ImageDragSort from '@/components/image-drag-sort/img-and-video.vue';
// import dropdown from '@/components/dropdown/dropdown.vue';
import { mapState } from 'vuex';
import { editCHeckRecord } from '@/apis/workOrder.js';

// import RepairFitting from '@/components/repairFitting/repairFitting.vue';
import { update } from '@/apis/repair.js';
export default {
	props: {
		planId: {
			type: String,
		},
		restFlag: {
			type: String,
		},
	},
	components: {
		ImageDragSort,
	
		// unipopup
	},

	data() {
		return {
			obj: {
				disposeImgUrl: [],
				disposeDesc: '',
				// disposeType: "",
				// checkTypeId: "",
				// partIds: "",
				// checkContentId: "",
				// partNames: "",
			},
			refresh: 0,
			isEdit: false,
			updateStatus: false,
		};
	},
	watch: {
		'obj.disposeDesc': {
			handler: function () {
        
			},
			deep: true,
		},
	},
	created() {},
	computed: {
		...mapState('user', ['userinfo']),
	},
	methods: {
		// showDropDown(res) {
		//   this.$refs.repairFitting.close();
		// },
		// 获取设备类型
		// getData(res) {
		//   this.obj.disposeType = res + 1;
		// },
		// getPart(res, curName) {
		//   console.log("getPart", res);
		//   let partIds = [];
		//   let partNames = [];
		//   for (let i = 0; i < res.length; i++) {
		//     partIds.push(res[i].id);
		//     partNames.push(res[i].name);
		//   }
		//   this.obj.partIds = partIds.join(",");
		//   this.obj.partNames = partNames.join("&&");
		//   if (curName) {
		//     this.obj.partNames = this.obj.partNames + "&&" + curName;
		//   }
		// },
		changeImg(val) {
			console.log(val, 'val的值');
			this.obj.disposeImgUrl = val;
		},
		descConfirm(e) {
			console.log(e.detail.value);
			if (e.detail.value.length >= 300) {
				this.obj.disposeDesc = e.detail.value.substring(0, 300);
			} else {
				this.obj.disposeDesc = e.detail.value;
			}
		},
		// 初始化
		initRecord(res) {
			console.log(res, 'res的至');
			// 如果是编辑记录
			this.isEdit = res.isEdit;
			if (res.isEdit) {
				this.obj.disposeDesc = res.disposeDesc;
				this.obj.disposeImgUrl = res.disposeImgUrl;
				this.obj.id = res.id;
			} else {
				this.obj.disposeDesc = '';
				this.obj.disposeImgUrl = [];
			}
			//  console.log(res,isEdit,9999)
			// this.isEdit=isEdit.isEdit
			// this.obj.disposeDesc=res.mdisposeDesc
			// this.obj.disposeImgUrl=rdisposeImgUrl
		},
		// 保存
		async handleSave() {
			//   uni.showLoading({
			//     title: "请稍后",
			//     mask: true,
			//   });
			//   await this.getDetail();
			//   uni.hideLoading();
			//   if (this.planOrderStatus === 4 && !this.updateStatus) {
			//     console.log("完成");
			//     this.$emit("hadDone");
			//   } else {

			//   }
			const { disposeImgUrl, disposeDesc } = this.obj;

			if (!disposeImgUrl.length || !disposeDesc) {
				let str = '';
				// if (!disposeType) {
				//   str = "请选择维修类型";
				// }
				if (!disposeImgUrl.length) {
					str = '请上传图片/视频';
				}
				if (!disposeDesc) {
					str = '请输入备注';
				}

				uni.showToast({
					title: str,
					icon: 'none',
				});
				return false;
			} else {
				// let parts = this.obj.partNames.split("&&");
				// if (!parts[parts.length - 1]) {
				//   uni.showToast({
				//     title: "自定义配件内容不能为空",
				//     icon: "none",
				//   });
				//   return;
				// }
				uni.showLoading({
					title: '提交',
					mask: true,
				});

				// let medio= this.obj.disposeImgUrl.map(item=>{return item.url})
				// this.obj.disposeImgUrl=medio
				// console.log(medio,"medio")
				// console.log(this.obj,"this.obj")
				// return
				// console.log("更新部件", {
				//   ...this.obj,
				//   planId: this.planId,
				//   recordDesc: "创建了记录",
				//   userId: this.userinfo.user_id,
				// });
				let obj = JSON.parse(JSON.stringify(this.obj));
				// let imgs = obj.disposeImgUrl;
				// let arr = [];
				// for (let i = 0; i < imgs.length; i++) {
				//   arr.push({
				//     url: imgs[i],
				//     type: "image",
				//   });
				// }
				// obj.disposeImgUrl = arr;
				uni.hideLoading();
				//  console.log('obj',obj)
				//  return
				update({
					...obj,
					planId: this.planId,
					userId: this.userinfo.user_id,
				}).then((res) => {
					// console.log(res);
					this.addMsg(res.data);
				});
			}
		},
		addMsg(checkHistoryId) {
			uni.showLoading({
				title: '保存中',
				mask: true,
			});
			const params = {
				planId: this.planId,
				userId: this.userinfo.user_id,
				checkHistoryId: checkHistoryId,
				recordLog: this.isEdit ? '更新了记录' : '创建了记录',
				recordDataValue: this.obj,
			};
			editCHeckRecord(params).then((res) => {
				console.log(res);

				uni.hideLoading();
				this.obj = {
					disposeImgUrl: [],
					disposeDesc: '',
					// disposeType: "",
					// checkTypeId: "",
					// partIds: "",
					// checkContentId: "",
					// partNames: "",
				};
				uni.showToast({
					title: `${this.isEdit ? '新增成功' : '修改成功'}`,
					icon: 'none',
				});
				this.$emit('update');
			});
		},
		// getDetail() {
		//   return new Promise((resolve) => {
		//     fetchDetail({ planId: this.planId }).then((res) => {
		//       if (res) {
		//         console.log(res.data, "获取的值");
		//         this.planOrderStatus = res.data.status;
		//         this.updateStatus = res.data.updateStatus;
		//         resolve();
		//       }
		//     });
		//   });
		// },
	},
};
</script>
<style>

</style>
<style lang="scss" scoped>
.work-record {
  background-color: #fff;
  padding: 20rpx 40rpx 32rpx 40rpx;
  border-radius: 8rpx 8rpx 0rpx 0rpx;
  box-shadow: 0rpx -4rpx 12rpx 0rpx rgba(0, 0, 0, 0.12);
  .line {
    margin-bottom: 18rpx;
    display: flex;
    justify-content: center;
    text {
      width: 64rpx;
      height: 10rpx;
      background: #d8d8d8;
      border-radius: 6rpx;
    }
  }
  .content {
    .content_title {
      font-size: 32rpx;
      font-weight: 500;
      color: #333;
      margin-bottom: 28rpx;
    }
    .content_item {
      margin-bottom: 16rpx;
      .name {
        font-size: 26rpx;
        margin-bottom: 16rpx;
        color: #333;
        text {
          color: #e54b4b;
        }
      }
    }
    .imgBox {
      padding-bottom: 32rpx;
      // border-bottom: 2rpx solid #e9e9e9;
      .name {
        margin-bottom: 16rpx;
        font-size: 26rpx;
        color: #333;
        text {
          color: #e54b4b;
        }
      }
    }
    .notice {
      width: 100%;
      // padding-top: 32rpx;
      padding-bottom: 20rpx;
      // height: 200rpx;
      text {
        color: #e54b4b;
      }
      .name {
        display: flex;
        font-size: 26rpx;
        color: #333;
        margin-bottom: 16rpx;
      }
      .area {
        padding: 20rpx;
        border: 2rpx solid #e9e9e9;
        textarea {
      font-size: 28rpx;
      height: 150rpx; 
      width: 100%
    }
      }
    }
  
    .length {
      text-align: right;
      // padding-bottom: 20rpx;
      color: #ccc;
    }
  }
  .save {
    display: flex;
    justify-content: center;
    button {
      display: flex;
      width: 670rpx;
      height: 70rpx;
      // background: #0091ff;
      border-radius: 8rpx;
      // color: #fff;
      justify-content: center;
      align-items: center;
    }
    // .disabled{
    // 	color: #fff;
    // 	background-color: #ccc!important;
    // 	pointer-events: none;

    // }
  }
}
</style>
